<!-- 暂时没用 -->
<script setup>
import useDataStore from '@/store/index'
import { storeToRefs } from 'pinia';
import { ref } from 'vue';
import { useRouter } from 'vue-router'


defineOptions({
    name: 'mobileHeaders'
})

const router = useRouter()
const dataStore = useDataStore()
const { userInfo, isLogin } = storeToRefs(dataStore)

let messagePopupShow = ref(false)


const btnAction = () => {
    if (isLogin.value) {
        router.push({ name: 'user' })
    } else {
        router.push({ name: 'login' })
    }
}

const showMessagePopup = () => {
    messagePopupShow.value = true
}

</script>

<template>
    <div class="mobileHeaders-box">
        <div class="mobileHeaders">
            <div class="mobileHeaders-left" @click="btnAction">{{ isLogin ? `欢迎 , ${userInfo.user_name}` : '请登录' }}
            </div>
            <div class="mobileHeaders-mid"></div>
            <div class="mobileHeaders-right">
                <div class="right-icon"><el-icon @click="showMessagePopup">
                        <ChatDotSquare />
                    </el-icon></div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.mobileHeaders-box {
    width: 100%;
    height: 50px;
    box-shadow: #eee 0 3px 5px 0;
    display: flex;
    justify-content: center;
    background-color: white;
    z-index: 1000;

    .mobileHeaders {
        width: 90%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>